import React from 'react'
import { NavLink } from 'react-router-dom'
import './Nav.css'
export default function Nav() {
  return (
    <div className="Header">
      <div className="logo">Logo</div>
      <nav>
        <ul>
          <li>
            <NavLink
              className={({ isActive }) => (isActive ? 'active' : '')}
              to="/home">
              首页
            </NavLink>
          </li>
          <li>
            <NavLink
              className={({ isActive }) => (isActive ? 'active' : '')}
              to="/interactive">
              家校互动
            </NavLink>
          </li>
          <li>
            <NavLink
              className={({ isActive }) => (isActive ? 'active' : '')}
              to="/notice">
              局校通知
            </NavLink>
          </li>
          <li>
            <NavLink
              className={({ isActive }) => (isActive ? 'active' : '')}
              to="/message">
              消息统计
            </NavLink>
          </li>
          <li>
            <NavLink
              className={({ isActive }) => (isActive ? 'active' : '')}
              to="/user">
              用户统计
            </NavLink>
          </li>
          <li>
            <NavLink
              className={({ isActive }) => (isActive ? 'active' : '')}
              to="/school">
              学校管理
            </NavLink>
          </li>
        </ul>
      </nav>
      <div className="tail">
        <span>登录</span>|<span>注册</span>
      </div>
    </div>
  )
}
